Add variable picker dropdown to SliderRow for design token scales - #548

Walkthrough

Adds a new variableScales.ts module exporting predefined CSS variable option lists, extends SliderRow.svelte with a variableOptions prop and a variable/raw-CSS view-selection state machine, and wires variableOptions through SliderRow instances across BordersPanel, ComponentsPanel, LayoutPanel, MacrosPanel, MiscPanel, and SpacingPanel.

Changes

Variable scale slider options

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant SliderRow
  participant RangeWithNumber

  User->>SliderRow: interacts with control
  SliderRow->>SliderRow: compute allOptions, matchedOption
  alt showPicker true
    SliderRow-->>User: render select dropdown
    User->>SliderRow: pickOption(value)
  else showRawText true
    SliderRow-->>User: render raw CSS input
    User->>SliderRow: onRawSet(rawDraft)
  else
    SliderRow->>RangeWithNumber: render slider
    User->>SliderRow: backToVariable()
  end

Possibly related PRs

• codeslash-dev/SLASHED#460: Earlier PR wired raw token editing (rawDefault/currentRaw/onRawSet) into SliderRow usage in MacrosPanel, directly overlapping with this PR's refactor of SliderRow's raw-mode handling and variableOptions extension.

Suggested labels: codex

• X
• Mastodon
• Reddit
• LinkedIn

• Add a dropdown picker for sliders whose defaults are CSS variables (design tokens).
• Preserve raw CSS editing for expressions while keeping numeric sliders for custom values.
• Centralize scale option lists and wire them into all variable-backed knobs.

graph TD
  VS["variableScales.ts"] --> P["Panels"] --> SR["SliderRow.svelte"] --> D{"Mode"}
  D --> PK["Variable picker"] --> O["Overrides state"]
  D --> RT["Raw CSS input"] --> O
  D --> SL["RangeWithNumber"] --> O

  subgraph Legend
    direction LR
    _f["File/Module"] ~~~ _ui{"UI decision"} ~~~ _s["UI control"]
  end

Loading

The following are alternative approaches to this PR:

1. Infer scale options from rawDefault token name

• ➕ Avoids threading variableOptions through every SliderRow call site
• ➕ Less repetition in panel definitions
• ➖ Brittle parsing/mapping (needs a registry anyway for non-standard tokens)
• ➖ Harder to type-check and reason about which options are valid per knob

2. Introduce a dedicated TokenPicker component wrapping SliderRow

• ➕ Isolates the mode/state machine in a focused component
• ➕ Could standardize styling/behavior across future token-backed inputs
• ➖ More component surface area and prop plumbing
• ➖ May duplicate parts of SliderRow unless SliderRow is split significantly

3. Central knob metadata registry (token -> scale) used by panels

• ➕ Single source of truth for which token belongs to which scale
• ➕ Could power validation, docs, and UI affordances beyond pickers
• ➖ Heavier upfront design and migration effort
• ➖ Overkill if only a small set of sliders need scale pickers

Recommendation: The current approach (explicit variableOptions + centralized variableScales) is a good balance: it keeps SliderRow generic, avoids brittle inference, and makes panel intent explicit and typeable. If picker usage expands significantly, consider evolving toward a knob metadata registry to reduce per-panel repetition.

Enhancement (7) +173 / -46

SliderRow.svelteAdd variable-backed dropdown picker with explicit mode state +93/-26

Add variable-backed dropdown picker with explicit mode state

• Refactors raw-CSS handling into a three-state manualView and introduces a variable picker when the current value matches a known token option. Adds expression-shaped detection to prefer editable raw text over resolved numeric sliders, and provides transitions for 'Custom value…' and 'back to variable'.

configurator/src/components/inputs/SliderRow.svelte

BordersPanel.svelteWire border/radius/space scale options into SliderRow knobs +9/-4

Wire border/radius/space scale options into SliderRow knobs

• Imports scale lists and passes variableOptions for variable-backed defaults (e.g., divider width/gap, media radius, and component tokens). Adds explicit typing for token arrays to ensure options are provided consistently.

configurator/src/components/panels/BordersPanel.svelte

ComponentsPanel.svelteProvide scale pickers for button/card variable-default sliders +16/-13

Provide scale pickers for button/card variable-default sliders

• Annotates token configs with VarOption[] and supplies variableOptions for radius/space/border-width/size-backed defaults. Ensures SliderRow can render a dropdown instead of a resolved numeric value for these knobs.

configurator/src/components/panels/ComponentsPanel.svelte

LayoutPanel.svelteEnable scale dropdowns for container and spacing-backed layout knobs +7/-0

Enable scale dropdowns for container and spacing-backed layout knobs

• Imports SPACE_SCALE and CONTAINER_SCALE and passes variableOptions to relevant SliderRow instances (center widths, gutters, imposter margin, breakout widths, etc.).

configurator/src/components/panels/LayoutPanel.svelte

MacrosPanel.svelteAdd variableOptions for macro spacing/radius knobs; remove raw mode where not needed +4/-3

Add variableOptions for macro spacing/radius knobs; remove raw mode where not needed

• Supplies SPACE_SCALE/RADIUS_SCALE to variable-backed SliderRow controls so they render pickers. Removes rawDefault/currentRaw/onRawSet for --sf-scroll-shadow-size, keeping it as a plain numeric knob.

configurator/src/components/panels/MacrosPanel.svelte

SpacingPanel.svelteEnable space scale dropdowns for gap/content-gap/gutter knobs +4/-0

Enable space scale dropdowns for gap/content-gap/gutter knobs

• Imports SPACE_SCALE and passes variableOptions for spacing knobs whose defaults are token variables, allowing selection among sibling space steps.

configurator/src/components/panels/SpacingPanel.svelte

variableScales.tsAdd centralized design-token scale option lists for variable pickers +40/-0

Add centralized design-token scale option lists for variable pickers

• Introduces VarOption and exports scale arrays for space, radius, border-width, container, size, and shadow. Provides a shared source of dropdown-ready {label,value} pairs for SliderRow.

configurator/src/lib/variableScales.ts

Bug fix (1) +5 / -0

MiscPanel.svelteAdd variable-backed support for --sf-touch-target using size scale +5/-0

Add variable-backed support for --sf-touch-target using size scale

• Adds rawDefault/currentRaw/onRawSet and SIZE_SCALE variableOptions so touch target can be selected from sibling size tokens or overridden with a custom value.

configurator/src/components/panels/MiscPanel.svelte

Description

SliderRow shows the variable <select> whenever hasVarInfo is true and currentRaw is
undefined, even if there are no sibling variableOptions (or the default is a non-var(...)
expression). This changes some rows (e.g. BordersPanel fine-tune radii, LayoutPanel sticky offsets)
from a direct slider to a dropdown-first flow, requiring an extra “Custom value…” step and surfacing
awkward single-option selects.

Code

configurator/src/components/inputs/SliderRow.svelte[R33-65]

+  let allOptions = $derived.by(() => {
+    const opts: { label: string; value: string }[] = [];
+    if (rawDefault) opts.push({ label: `${prettyVar(rawDefault)} (default)`, value: rawDefault });
+    for (const o of variableOptions ?? []) {
+      if (o.value !== rawDefault) opts.push(o);
+    }
+    return opts;
+  });
+
+  let matchedOption = $derived(
+    allOptions.find((o) => o.value === (currentRaw ?? rawDefault))
+  );
+
+  let hasVarInfo = $derived(!!rawDefault && !!onRawSet);
+
+  // An override that isn't one of the known options but still looks like a
+  // CSS expression (var()/calc()/clamp()/…) — surface it as editable text
+  // rather than silently falling back to a resolved slider number.
+  let isExprShaped = $derived(
    !!currentRaw && /^(var|calc|clamp|min|max|env)\(/.test(currentRaw.trim())
  );

-  let showRaw = $derived(!!(rawDefault && onRawSet && (userRawMode || isRawOverride || isEditing)));
+  // User-driven view override, layered on top of the value-derived state above.
+  // 'none' = auto-detect from currentRaw; 'slider'/'raw' = user forced a view
+  // while outside the picker (via "Custom value…" or the </> toggle).
+  let manualView = $state<'none' | 'slider' | 'raw'>('none');
+
+  // The dropdown is shown whenever the current state maps to a known option
+  // (the default, or one of the sibling scale steps) and the user hasn't
+  // explicitly asked to go custom.
+  let showPicker = $derived(
+    hasVarInfo && manualView === 'none' && (currentRaw === undefined || !!matchedOption)
+  );

Relevance

⭐⭐⭐ High

Team previously accepted SliderRow UX/correctness fixes; likely will gate picker to avoid
regressions (PR #447).

PR-#447
PR-#457

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

SliderRow always adds rawDefault to allOptions, and showPicker becomes true whenever
hasVarInfo is true and currentRaw is unset. Existing call sites like BordersPanel’s fine-tune
radius rows pass rawDefault + onRawSet but no variableOptions, so they will render a dropdown
(default + “Custom value…”) instead of the intended slider UI.

configurator/src/components/inputs/SliderRow.svelte[32-70]
configurator/src/components/panels/BordersPanel.svelte[334-348]
configurator/src/components/panels/LayoutPanel.svelte[323-344]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`SliderRow` currently renders the picker by default for any row that provides `rawDefault` and `onRawSet` (i.e. `hasVarInfo`), because `showPicker` becomes true whenever `currentRaw === undefined`. Since `allOptions` always includes `rawDefault`, these rows get a dropdown even when `variableOptions` is omitted, producing a near-empty picker (default + “Custom value…”) and hiding the slider until the user makes an extra selection.

This is especially problematic for rows where `rawDefault` is a `calc(...)` expression (e.g. fine-tune radius steps): they are not “token scale pickers” and shouldn’t be rendered as selects.

## Issue Context
The PR’s intent is to show a dropdown for design-token *scales* (space/radius/etc.) when a token’s default is a CSS variable and sibling scale steps are available.

## Fix Focus Areas
- configurator/src/components/inputs/SliderRow.svelte[32-70]
- configurator/src/components/panels/BordersPanel.svelte[334-348]
- configurator/src/components/panels/LayoutPanel.svelte[323-344]

## Proposed fix
1. Add a derived guard for whether a real picker should exist, e.g.:
  - require `variableOptions?.length > 0` (preferred), and optionally
  - require the default (or current value) to look like `var(...)` (to avoid `calc(...)` defaults turning into pickers).
2. Update `showPicker` to include that guard, e.g.:
  - `let canPick = $derived(hasVarInfo && (variableOptions?.length ?? 0) > 0);`
  - `let showPicker = $derived(canPick && manualView === 'none' && (currentRaw === undefined || !!matchedOption));`
  - (optional) also gate with `/^var\(/.test(rawDefault ?? '')` if you want to strictly match the PR’s “default is a CSS variable” requirement.

This keeps the picker for scale-backed sliders while preserving the previous slider-first behavior for rows that don’t provide sibling options (and for `calc(...)` defaults like fine-tune radii).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools